<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="sidebar">
      <div class="sidebar-header">
        <h3>管理后台</h3>
      </div>
      <el-menu
        :default-active="activeIndex"
        class="sidebar-menu"
        router
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409eff"
      >
        <el-menu-item index="/admin">
          <el-icon><Monitor /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/admin/products">
          <el-icon><Goods /></el-icon>
          <span>商品管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/orders">
          <el-icon><List /></el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/users">
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/categories">
          <el-icon><Folder /></el-icon>
          <span>分类管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/brands">
          <el-icon><Shop /></el-icon>
          <span>品牌管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/colors">
          <el-icon><Brush /></el-icon>
          <span>颜色管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/sizes">
          <el-icon><Collection /></el-icon>
          <span>尺码管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/stock">
          <el-icon><Box /></el-icon>
          <span>库存管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/advertisements">
          <el-icon><Promotion /></el-icon>
          <span>广告管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/partner-links">
          <el-icon><Link /></el-icon>
          <span>友链管理</span>
        </el-menu-item>
        <el-sub-menu index="/admin/reports">
          <template #title>
            <el-icon><TrendCharts /></el-icon>
            <span>统计报表</span>
          </template>
          <el-menu-item index="/admin/reports/traffic">流量报表</el-menu-item>
          <el-menu-item index="/admin/reports/marketing">营销报表</el-menu-item>
          <el-menu-item index="/admin/reports/performance">业绩报表</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/admin/admins" v-if="isSuperAdmin">
          <el-icon><UserFilled /></el-icon>
          <span>管理员管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 顶部栏 -->
      <header class="header">
        <div class="header-left">
          <h2>{{ pageTitle }}</h2>
        </div>
        <div class="header-right">
          <span class="welcome-text">欢迎，{{ displayName }}</span>
          <el-button type="text" @click="handleLogout">退出登录</el-button>
        </div>
      </header>

      <!-- 主内容 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Monitor,
  Goods,
  List,
  User,
  UserFilled,
  Folder,
  Shop,
  Promotion,
  Link,
  Brush,
  Collection,
  Box,
  TrendCharts,
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const activeIndex = computed(() => route.path)

const pageTitle = computed(() => {
  const titles: Record<string, string> = {
    '/admin': '仪表盘',
    '/admin/products': '商品管理',
    '/admin/orders': '订单管理',
    '/admin/users': '用户管理',
    '/admin/categories': '分类管理',
    '/admin/brands': '品牌管理',
    '/admin/colors': '颜色管理',
    '/admin/sizes': '尺码管理',
    '/admin/stock': '库存管理',
    '/admin/advertisements': '广告管理',
    '/admin/partner-links': '友链管理',
    '/admin/admins': '管理员管理',
  }
  return titles[route.path] || '管理后台'
})

// 检查是否为超级管理员
const isSuperAdmin = computed(() => {
  // 从 authStore 中获取管理员信息
  const admin = authStore.admin
  console.log('🔍 [AdminLayout] 检查管理员权限:', admin)
  // 支持多种超级管理员角色格式
  return admin && (
    admin.adminRole === 'SUPER_ADMIN' || 
    admin.adminRole === '超级管理员' ||
    admin.adminRoleId === 1
  )
})

const handleLogout = async () => {
  await authStore.logout()
  ElMessage.success('已退出登录')
  router.push('/auth/login')
}

const displayName = computed(
  () => authStore.admin?.username || authStore.user?.username || '管理员',
)
</script>

<style scoped lang="scss">
.admin-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #f0f2f5;
  

  .sidebar {
    background-color: #304156;
    height: 100vh;
    overflow-y: auto;
    border-right: none;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);

    .sidebar-header {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #3a4a5c;

      h3 {
        color: #fff;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .sidebar-menu {
      border: none;
      background-color: transparent;

      :deep(.el-menu-item) {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #3a4a5c;

        &:hover {
          background-color: #263445;
        }

        &.is-active {
          background-color: #409eff;
          color: #fff;
        }
      }

      :deep(.el-sub-menu) {
        .el-sub-menu__title {
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #3a4a5c;
        }
      }
    }
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    

    .header {
      height: 60px;
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .header-left {
        h2 {
          margin: 0;
          color: #333;
          font-size: 20px;
          font-weight: 600;
        }
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 15px;

        .welcome-text {
          color: #666;
          font-size: 14px;
        }

        .el-button {
          color: #409eff;
          
          &:hover {
            color: #66b1ff;
          }
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background-color: #f0f2f5;
    }
  }
}
</style>
